<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-12 20:47:14
-->
<template>
  <div>
    <avue-form
      v-if="!validatenull(form)"
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
      <template #topTime>
        <span>{{ form.topStartTime }} - {{ form.topEndTime }}</span>
      </template>
      <template #content>
        <el-steps direction="vertical">
          <el-step
            v-for="(item, index) in form.contentList"
            :key="index"
            :title="item.content"
            :description="item.createTime"
          ></el-step>
        </el-steps>
        <el-checkbox
          v-model="form.synchronization"
          :disabled="true"
        >
          若时间轴更新，后续则同步更新最近动态
        </el-checkbox>
      </template>
      <template #goods>
        <div
          v-for="(item, index) in suppliesList"
          :key="index"
          class="goods-wrapper"
        >
          <div class="label">{{ item.label }}：</div>
          <div class="goods-content">
            <div class="goods-list">
              <div
                v-for="goodsItem in item.skuList"
                :key="goodsItem.id"
                class="goods-item"
              >
                <img
                  :src="goodsItem.small"
                  alt=""
                />
                <div class="name">
                  <span class="txt">
                    {{ goodsItem.goodsName }}
                  </span>
                </div>
              </div>
            </div>
            <div>排序值：{{ item.sort }}</div>
            <div>
              商品动态文案：
              <span class="cl-primary">{{ item.copyWriting }}</span>
            </div>
          </div>
        </div>
        <el-empty
          v-if="!suppliesList || !suppliesList.length"
          :image-size="100"
          description="暂无商品配置"
        ></el-empty>
      </template>
      <template #areaId="{ disabled }">
        <el-select
          v-model="form.areaId"
          clearable
          :disabled="disabled"
          placeholder="请选择分配所属区域"
        >
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </template>
    </avue-form>
    <el-empty
      v-else
      :image-size="200"
    ></el-empty>
  </div>
</template>

<script>
import { tableOption } from '@/const/crud/pet/putAway';
import {
  getShelfRecord,
  fetchCloudAreaListByBaseId,
} from '@/api/core/pet-file';
import { getPetConfig } from '@/api/shop-core/pet';
import { remote } from '@/api/admin/dict';
import { replaceTemplate } from '@/util';
import { IS_SYNCHRONIZATION, BROADCAST_TYPE } from '@/const/type';
export default {
  name: '',
  props: {
    id: {
      type: [Object, String],
      status: { type: String },
    },
  },
  data() {
    return {
      suppliesList: [],
      tableOption: tableOption(true, true),
      form: {},
      BROADCAST_TYPE,
      personalityList: [],
      areaList: [],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getCloudAreaList();
          this.getShelfRecord();
          this.getSuppliesType();
        }
      },
    },
  },
  methods: {
    async getShelfRecord() {
      const res = await getShelfRecord(this.id);
      if (res.data.data) {
        this.form = { ...res.data.data };
        this.form.synchronization =
          this.form.synchronization === IS_SYNCHRONIZATION.YES;
        const temp = JSON.parse(this.form.files);
        this.form.petFile = temp.map((item) => {
          let type = 'mov';
          if (item.type === 'image') {
            type = 'jpg';
          }
          return `${item.url}?.${type}`;
        });
        this.form.petType = [this.form.typeCode, this.form.varietyCode];
        this.form.$petType = [this.form.typeName, this.form.varietyName];
        // 其他特征
        if (this.validatenull(JSON.parse(this.form.otherCharacteristics))) {
          this.form.otherCharacteristics = '';
        } else {
          this.form.otherCharacteristics = JSON.parse(
            this.form.otherCharacteristics
          ).map((item) => item.value);
        }
        // 基地状态/人气
        if (this.validatenull(JSON.parse(this.form.popularity))) {
          this.form.popularity = '';
        } else {
          this.form.popularity = JSON.parse(this.form.popularity).map(
            (item) => item.value
          );
        }
        // 性格标签
        if (this.validatenull(JSON.parse(res.data.data.personality))) {
          this.form.personality = [];
        } else {
          this.form.personality = JSON.parse(res.data.data.personality).map(
            (item) => item.value
          );
        }
      }
    },
    async getSuppliesType() {
      const { data } = await remote('pet_supplies_types');
      this.suppliesDict = data.data;
      this.getPetGoodsConfig();
    },
    async getPetGoodsConfig() {
      const res = await getPetConfig(this.id);
      this.suppliesList = res.data.data.map((item) => {
        item.copyWriting = replaceTemplate(
          item.copyWriting,
          {
            goodsName: item.skuList[0].goodsName,
          },
          '',
          '',
          /\{(\w+)\}/g
        );
        console.log('item.copyWriting = ', item.copyWriting);
        const dicItem = this.suppliesDict.find(
          (dicItem) => dicItem.value === item.goodsType
        );
        item.label = dicItem.label;
        return item;
      });
    },
    getCloudAreaList(baseId) {
      fetchCloudAreaListByBaseId({ baseId }).then((res) => {
        this.areaList = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-wrapper {
  display: flex;
  .label {
    width: 120px;
    text-align: right;
    margin-right: 12px;
    font-size: 16px;
    font-weight: 700;
    &.required {
      &::before {
        content: '*';
        color: red;
      }
    }
  }
  .goods-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    .goods-item {
      margin-top: 20px;
      text-align: center;
      margin: 20px 15px;
      img {
        width: 80px;
        height: 80px;
      }
      .name {
        margin-top: 12px;
        // 两行超出省略
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 150px;
        .txt {
          display: inline-block;
          text-align: left;
        }
      }
    }
  }
  .cl-primary {
    color: $--color-primary;
  }
}
</style>
